<template>
  <div class="comment_poetry">
    <div class="poetryList">
      <div class="poetryList_li">
        <h1 class="poetryTitle">{{poetryFrom.poetryTitle}}</h1>
        <span class="poetryDynasty">{{poetryFrom.poetryDynasty}}</span> ·
        <span class="poetryPote">{{poetryFrom.poetryPote}}</span>
        <div v-for="(cnt,index) in poetryFrom.poetryContnent" :key="index+'poetry'">
          <p class="poetryContnent">{{cnt}}</p>
        </div>
      </div>
    </div>
    <div class="comment_submit">
      <el-input type="commentText" :rows="2" placeholder="请输入内容" v-model="commentText"></el-input>
      <el-button class="input_comment_submit" type="primary" @click="submitComment">提交评论</el-button>
    </div>
    <div class="comment_list">
      <ul>
        <li class="comment_li" v-for="cmt in $store.state.user.commentList" :key="cmt._id">
          <span class="comment_userName">{{cmt.userName}}</span>
          <p class="comment_commentText">{{cmt.commentText}}</p>
          <div class="comment_div">
            <!-- <span>{{cmt.userName}}</span> -->
            <span class="comment_createTime">{{cmt.createTime | date}}</span>
            <span class="comment_commentNumber" @click="addcommentNumber(cmt)">
              点赞
              <i class="el-icon-star-on"></i>
              <i class="cmt_number">{{cmt.commentNumber}}</i>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "userComment",
  data() {
    return {
      poetryFrom: {},
      commentText: ""
      //   poetryFrom: {
      // commentNumber: 0
      // commentText: "你好呀"
      // createTime: 1589695366890
      // poetryId: "5ebfa314d98cb22b0095286f"
      // poetryTitle: "己亥杂诗"
      // userName: "小陈"
      // user_id: "5ebf51fd410e78228cdddc21"
      //   }
    };
  },
  methods: {
    //提交评论
    submitComment() {
      const { poetryId, poetryTitle, userName, user_id } = this.poetryFrom;
      let commentForm = {
        poetryId, //诗词id
        poetryTitle, //诗词标题
        userName, //评论用户昵称
        user_id, //评论用户id
        createTime: Date.now(), //评论时间
        commentText: this.commentText, //评论内容
        commentNumber: 0 //点赞数
      };
      this.$store.dispatch("addCommentList", commentForm).then(res => {
        if (res.ok === 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.commentText = "";
          this.getCommentList();
        }
      });
    },
    //获取评论
    getCommentList() {
      this.$store.dispatch("getCommentList", this.poetryFrom.poetryId);
    },
    //点赞
    addcommentNumber(poetryFrom) {
      this.$store.dispatch("putCommentNumber", poetryFrom).then(res => {
        if (res.ok === 1) {
          this.getCommentList();
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      });
    }
  },
  mounted() {
    // console.log(this.$route.query);
    this.poetryFrom = this.$route.query;
    this.getCommentList();
  }
};
</script>

<style scoped lang="scss">
.comment_poetry {
  margin: 0 auto;
  padding: 0 8rem;
  .poetryList {
    .poetryList_li {
      list-style: none;
      text-align: center;
      margin-bottom: 3rem;
      line-height: 1.5rem;
      .poetryTitle {
        font-style: normal;
      }
      .poetryDynasty {
        font-size: 0.7rem;
      }
      .poetryPote {
        font-size: 0.8rem;
      }
    }
  }
  .comment_submit {
    min-height: 5rem;
    .input_comment_submit {
      display: inline-block;
      margin: 0.5rem auto;
      float: right;
    }
  }
  .comment_list {
    margin-top: 1rem;
    .comment_li {
      margin-top: 1.5rem;
      background: rgba(141, 224, 169, 0.2);
      border-radius: 0.5rem;
      .comment_userName {
        font-size: 0.9rem;
        color: rgb(250, 52, 69);
      }
      .comment_commentText {
        padding: 0.2rem 1rem;
      }
      .comment_div {
        display: flex;
        justify-content: space-between;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        .comment_createTime {
          font-size: 0.8rem;
          color: rgb(52, 157, 228);
        }
        .comment_commentNumber {
          margin-right: 3rem;
          font-size: 0.8rem;
          i {
            font-size: 1rem;
          }
          .el-icon-star-on {
            color: rgb(255, 187, 0);
          }
          .cmt_number {
            color: rgb(255, 0, 149);
          }
        }
      }
    }
  }
}
</style>